<!--
 * @Description: 
 * @Author: chenjiaxin
 * @Date: 2022-03-13 06:42:41
 * @LastEditTime: 2022-03-14 09:36:13
 * @FilePath: \WebSkillExtend\eg10-省略-展开\index2.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>省略-展开</title>
    <style>
      .warp {
        display: flex;
      }
      .text {
        width: 300px;
        border: 1px solid red;
      }
      /* 省略的样式 */
      .line_hide_2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      /* 用于浮动的，使得按钮可以浮动在最右下角 */
      .text::before {
        content: "";
        display: block;
        width: 0px;
        /** 动态高度 */
        height: calc(100% - 22px);
        /* 动态高度 也可以使用 margin-bottom: -24px来实现 */
        /* height: 100%;
        margin-bottom: -24px; */
        background-color: green;
        float: right;
      }
      .btn {
        float: right;
        clear: both;
        /* border: ; */
        color: red;
        cursor: pointer;
      }
      .btn::after {
        content: "展开";
        display: inline-block;
      }
      #exp:checked + .text {
        display: block;
      }
      #exp:checked + .text .btn::after {
        content: "收起";
      }
      .item {
        padding: 2px 10px;
        border: 1px solid green;
        margin: 5px 10px 5px 10px;
        /* float: left;
        clear: both; */
        display: inline-block;
      }
    </style>
  </head>
  <div id="app">
    <div class="warp">
      <input type="checkbox" id="exp" />
      <div class="text line_hide_2">
        <label class="btn" for="exp"></label>
        <!-- 据了解，北京冬奥会的竞赛场馆都是世界一流的场馆，冬奥会和冬残奥会期间各场馆与国际单项体育组织建立了很好的协作和沟通机制。严家蓉介绍，有关部门、业主已与世界冰壶联合会、国际雪车联合会等达成框架协议，并正积极和国际雪联、国际冬季两项联盟等商议，申办今年和今后几年的世界杯等国际性专业赛事。这将带动场馆的后续运营，助力中国冰雪运动发展 -->
        <span class="item" v-for="item in 30" :key="item">测试{{ item }}</span>
      </div>
    </div>
  </div>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.common.dev.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          list: ["1"],
        },
      });
    </script>
  </body>
</html>
